<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="content"></div>
<script>
    // 必须暴露一个属性作为“默认迭代器”，而 且这个属性必须使用特殊的 Symbol.iterator 作为键

    // 1.如下内置类型实现了Iterable接口
    /*
        字符串
        数组
        映射
        集合
        arguments对象
        NodeList等DOM集合类型
     */

    // 2.检查是否存在默认迭代器属性可以暴露这个工厂函数
    let num = 1;
    let obj = {}
    console.log(num[Symbol.iterator]); // undefined
    console.log(obj[Symbol.iterator]); // undefined

    // 3. 实现了迭代器工厂的函数
    let str = 'abc'
    let arr = ['a', 'b', 'c']
    let map = new Map().set('a', 1).set('b', 2).set('c', 3)
    let set = new Set().add('a').add('b').add('c')
    let els = document.querySelectorAll('.content')

    console.log(str[Symbol.iterator]())
    console.log(arr[Symbol.iterator]())
    console.log(map[Symbol.iterator]())
    console.log(set[Symbol.iterator]())
    console.log(els[Symbol.iterator]())

    // 4. 可以用于迭代的语句
    /*
        for - of 循环
        数组解构
        扩展操作符...
        Array.from()
        创建集合
        创建映射
        Promise.all()
        Promise.race()
        yield*
     */
    let arrays = ['z', 'x', 'c']
    for (let el of arrays) {
    }
    let [a, b, c] = arr
    let arr2 = [...arr]
    let arr3 = Array.from(arrays)
    new Set(arrays)
    new Map(arr.map((x, i) => [x, i]))

    class FooArray extends Array {
    }


</script>
</body>
</html>